﻿<style type="text/css">
    html, body {
        background-color: #f5f5f5;
    }

    .topTit {
        text-align: center;
        height: 5rem;
        line-height: 5rem;
        font-size: 1.6rem;
        padding-top: 2rem;
    }

    #loginForm {
        padding: 0 2rem;
    }

    .paramItem {
        position: relative;
        border-bottom: 1px solid #999;
        padding-left: 3.5rem;
        height: 4rem;
        margin-top: 3rem;
    }

        .paramItem img {
            width: 2.2rem;
            display: block;
            left: 0;
            top: 0;
            position: absolute;
            z-index: 1;
        }

        .paramItem input {
            background: transparent;
            border: none;
            outline: none;
            height: 4rem;
            width: 80%;
            display: inline-block;
            font-size: 1.6rem;
        }

    #yzmBtn {
        color: #8a1529;
        font-size: 1.4rem;
        width: auto;
        float: right;
        line-height: 4rem;
    }

    .locBtn {
        height: 5rem;
        text-align: center;
        line-height: 5rem;
        color: #fff;
        background-color: #8a1529;
        margin-top: 5rem;
        border-radius: 0.3rem;
        font-size: 1.5rem;
    }
</style>
<div class="topTit">参与玩法需要进行登录</div>
<form id="loginForm">
    <div class="paramItem">
        <img src="~/Content/images/icon_tel.png" />
        <input id="tel" name="tel" class="locInt" type="text" placeholder="输入手机号" />
    </div>
    <div class="paramItem">
        <img src="~/Content/images/icon_yzm.png" />
        <input id="yzm" name="yzm" class="locInt" type="text" placeholder="输入验证码" style="width: 50%;" />
        <a id="yzmBtn" onclick="yzm()">获取验证码</a>
    </div>

    <div id="loginBtn" class="locBtn" onclick="loginOn()">登录</div>
</form>


<script type="text/javascript">

    function yzm() {
        var model = {};
        model.mobile = $.trim($("#tel").val());

        $.ajax({
            type: "post",
            url: "/Exec/SendMsg",
            dataType: "json",
            contentType: 'application/json',
            data: JSON.stringify(model),
            success: function (result) {
                console.log(result);
                if (result.ret == 0) {
                    layer.alert('手机验证码发送成功');
                }
            }
        });
    }

    function loginOn() {
        var model = {};
        model.mobile = $.trim($("#tel").val());
        model.verifycode = $.trim($("#yzm").val());
        $.ajax({
            type: "post",
            url: "/Exec/Login",
            dataType: "json",
            contentType: 'application/json',
            data: JSON.stringify(model),
            success: function (result) {
                console.log(result);
                if (result.ret == 0) {
                    localStorage.setItem("WORLDCUP_TOKEN", result.data);
                    layer.alert('登录成功');
                    parent.location.reload();
                } else {
                    layer.alert("登录失败" + result.msg);
                }
            }
        });
    }

</script>  